<template>
	<view>
		<u-navbar :is-back="false" title="" title-color="#ffffff" :background="background"></u-navbar>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-20 u-m-b-20">
			<view class="u-m-r-10">
				<view v-if="userInfo.imgUrl != null"><u-avatar :src="userInfo.imgUrl" size="140"></u-avatar></view>
				<view v-else><u-avatar :src="pic" size="140"></u-avatar></view>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">
					{{ userInfo.nickName }}
					<u-tag class="tag" v-show="userInfo.realName" text="已认证" type="success" size="mini" />
				</view>
				<view class="u-font-14 u-tips-color">手机号:{{ userInfo.phone }}</view>
				<view class="u-flex u-m-t-10">
					<view class="u-font-14 u-tips-color">推荐码:{{ userInfo.referralCode }}</view>
					<view class="mini-btn"  @click="copyBtn()">一键复制</view>
				</view>
				
			</view>
			<!-- <view class="u-m-l-10 u-p-10"><u-icon name="scan" color="#969799" size="28"></u-icon></view> -->
			<!-- <view class="u-m-l-10 u-p-10"><u-icon name="arrow-right" color="#969799" size="28"></u-icon></view> -->
		</view>
		<!-- 我的订单 -->
		<view class="u-padding-left-20 u-padding-right-20 u-m-b-20">
			<u-cell-group class="u-m-t-20">
				<u-cell-item class="" title="我的订单" @tap="goOrder(0)"></u-cell-item>
				<u-grid :col="4">
					<!-- <u-grid-item>
						<u-icon name="rmb-circle" :color="iconColor2" :size="46"></u-icon>
						<view class="grid-text">待付款</view>
					</u-grid-item> -->
					<u-grid-item @click="goOrder(1)">
						<u-icon name="car" :color="iconColor2" :size="46"></u-icon>
						<view class="grid-text">待发货</view>
					</u-grid-item>
					<u-grid-item @click="goOrder(2)">
						<u-icon name="file-text" :color="iconColor2" :size="46"></u-icon>
						<view class="grid-text">已完成</view>
					</u-grid-item>
					<!-- <u-grid-item>
						<u-icon name="file-text" :color="iconColor2" :size="46"></u-icon>
						<view class="grid-text">待评价</view>
					</u-grid-item> -->
				</u-grid>
			</u-cell-group>
		</view>
		<!-- 常用工具 -->
		<view class="u-padding-left-20 u-padding-right-20 u-m-b-20">
			<u-cell-group class="u-m-t-20">
				<u-cell-item class="" title="常用工具" :arrow="false" :border-bottom="true"></u-cell-item>
				<u-grid :col="4" :border="false">
					<u-grid-item @click="goCoupon()">
						<u-icon name="coupon" :color="iconColor" :size="46"></u-icon>
						<view class="grid-text">优惠券</view>
					</u-grid-item>
					<u-grid-item @click="empty()">
						<u-icon name="heart" :color="iconColor" :size="46"></u-icon>
						<view class="grid-text">常用菜单</view>
					</u-grid-item>
					<u-grid-item @tap="goAddress()">
						<u-icon name="map" :color="iconColor" :size="46"></u-icon>
						<view class="grid-text">地址管理</view>
					</u-grid-item>
					<u-grid-item @click="empty()">
						<u-icon name="integral" :color="iconColor" :size="46"></u-icon>
						<view class="grid-text">商家认证</view>
					</u-grid-item>
					<!-- <u-grid-item>
						<u-icon name="checkmark-circle" :color="iconColor" :size="46"></u-icon>
						<view class="grid-text">收货确认单</view>
					</u-grid-item> -->
					<!-- <u-grid-item>
						<u-icon name="email" :color="iconColor" :size="46"></u-icon>
						<view class="grid-text">我的账单</view>
					</u-grid-item> -->
					<u-grid-item @click="goSetting">
						<u-icon name="setting" :color="iconColor" :size="46"></u-icon>
						<view class="grid-text">账号设置</view>
					</u-grid-item>
					<u-grid-item @click="getTellModel()">
						<u-icon name="server-fill" :color="iconColor" :size="46"></u-icon>
						<view class="grid-text">联系客服</view>
					</u-grid-item>
					<u-grid-item @click="empty()">
						<u-icon name="error-circle" :color="iconColor" :size="46"></u-icon>
						<view class="grid-text">关于我们</view>
					</u-grid-item>
				</u-grid>
			</u-cell-group>
		</view>
		<!-- 司机端 -->
		<view v-show="userInfo.type == 2||3" class="u-padding-left-20 u-padding-right-20">
			<u-cell-group class="u-m-t-20" :border-bottom="true">
				<u-cell-item class="" title="司机端" :arrow="false"></u-cell-item>
				<u-grid :col="4" :border="false">
					<u-grid-item @click="goDriver">
						<u-icon name="file-text" :size="46"></u-icon>
						<view class="grid-text">今日配送</view>
					</u-grid-item>
				</u-grid>
			</u-cell-group>
		</view>
		<!-- 业务端 -->
		<view v-show="userInfo.type == 2||3" class="u-padding-left-20 u-padding-right-20 u-m-b-20">
			<u-cell-group class="u-m-t-20">
				<u-cell-item class="" title="业务端" :arrow="false"></u-cell-item>
				<u-grid :col="4" :border="false">
					<u-grid-item @click="goBusiness(1)">
						<u-icon name="file-text" :size="46"></u-icon>
						<view class="grid-text">日业绩</view>
					</u-grid-item>
					<!-- <u-grid-item>
						<u-icon name="file-text" :size="46"></u-icon>
						<view class="grid-text">日订单</view>
					</u-grid-item> -->
					<u-grid-item @click="goBusiness(2)">
						<u-icon name="file-text" :size="46"></u-icon>
						<view class="grid-text">月业绩</view>
					</u-grid-item>
					<!-- <u-grid-item>
						<u-icon name="file-text" :size="46"></u-icon>
						<view class="grid-text">月订单</view>
					</u-grid-item> -->
				</u-grid>
			</u-cell-group>
		</view>
		<u-gap height="80" bg-color="#f3f4f6"></u-gap>
		<u-toast ref="uToast" />
		<u-popup v-model="tellModel" mode="center" border-radius="14" width="480rpx" height="220rpx">
			<view style="margin: 0,auto;">
				<u-cell-group>
					<u-cell-item icon="phone-fill" :title="phoneNum" :arrow="false" @click="tell(phoneNum)" value="客服电话1">
					</u-cell-item>
					<u-cell-item icon="server-fill" :title="phoneNum2" :arrow="false" @click="tell(phoneNum2)" value="客服电话2">
					</u-cell-item>
				</u-cell-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//
			background: {
				backgroundColor: '#FFFFFF'
				//backgroundImage: 'linear-gradient(90deg, rgb(0,164,133), rgb(51,241,205))'
			},
			//
			iconColor: '#303133',
			iconColor2: '#17933f',
			pic: 'https://uviewui.com/common/logo.png',
			userInfo: '',
			//
			phoneNum: '',
			phoneNum2: '',
			//
			tellModel:false,
		};
	},
	onLoad() {
		try {
			const token = uni.getStorageSync('token');
			console.log("token========center")
			console.log(token)
			if (token) {
				const userInfo = uni.getStorageSync('userInfo');
				console.log("userInfo=======")
				console.log(userInfo)
				this.userInfo = userInfo;
				if(!this.userInfo){
					//#ifdef APP-PLUS
					uni.reLaunch({
						url: '/pages/login/index'
					});
					//#endif
					//#ifdef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/login/xcxLogin'
					});
					//#endif
				}
				this.getFixed();
			} else {
				//#ifdef APP-PLUS
				uni.reLaunch({
					url: '/pages/login/index'
				});
				//#endif
				//#ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pages/login/xcxLogin'
				});
				//#endif
			}
		} catch (e) {
			// error
		}
	},
	//下拉
	onPullDownRefresh() {
		console.log('2222');
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 2000);
	},
	methods: {
		//配置信息
		getFixed() {
			this.$u.api.getFixedInfo().then(res => {
				console.log('getFixedInfo=======');
				res.data.content.forEach(item => {
					console.log(item);
					if (item.value == 'SERVICE_TEL') {
						this.phoneNum = item.content;
					}
					if (item.value == 'SERVICE_TEL2') {
						this.phoneNum2 = item.content;
					}
				});
			});
		},
		//
		getTellModel() {
			let _t = this;
			_t.tellModel = true;
		},
		tell(phone) {
			uni.makePhoneCall({
				phoneNumber: phone //仅为示例
			});
		},
		//
		goOrder(index) {
			this.$u.route({
				type: 'to',
				params: {
					index: index
				},
				url: '/pages/order/index'
			});
		},
		goAddress() {
			this.$u.route({
				type: 'to',
				//params: this.params,
				url: '/pages/address/index'
			});
		},
		goRealName() {
			console.log('goRealName');
			this.$u.route({
				type: 'to',
				url: '/pages/realName/realName'
			});
		},
		empty() {
			this.$refs.uToast.show({
				title: '提示：该功能暂未开放',
				type: 'default'
			});
		},
		goSetting() {
			uni.navigateTo({
				url: '/pages/setting/index'
			});
		},
		goDriver() {
			uni.navigateTo({
				url: '/pages/driver/index'
			});
		},
		goCoupon() {
			uni.navigateTo({
				url: '/pages/coupon/index'
			});
		},
		goBusiness(date) {
			uni.navigateTo({
				url: '/pages/business/index?date='+date
			});
		},
		copyBtn(){
			let _t= this;
			 uni.setClipboardData({
				 data: _t.userInfo.referralCode,
			      success: function (res) {
			          uni.showToast({
			              title: '复制成功',
						  duration: 1000
			          });
			      },
			      fail:function (res) {
			          uni.showToast({
			              title: '复制失败',
						  duration: 1000
			          });
			      }
			  });             
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f4f6;
	height: calc(100vh);
}

.mini-btn{
	background-color: #19BE6B;
	color: #ffffff;
	font-size: 11px;
	padding: 2px 4px;
	margin-left: 10rpx;
	border-radius:8rpx;
}
.camera {
	width: 54px;
	height: 44px;

	&:active {
		background-color: #f3f4f6;
	}
}
.user-box {
	background-color: #fff;
}
.grid-text {
	padding-top: 6rpx;
	font-size: 24rpx;
	color: #909399;
}
.outBtn {
	margin: 30rpx 20rpx;
}
.tag {
	margin-left: 10rpx;
}
</style>
